<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>

<script>
  const { effect, reactive, ref, shallowRef, toRef} = VueReactivity;

  //reactive内部采用proxy
  //reactive接受普通类型会直接返回, 要想使普通类型变成响应式可以使用ref
  //ref内部使用的是defineProperty

  /** case1 */
  const state = ref('ahhh'); //将普通的类型转成一个对象,这个对象中有value属性,指向原来的值
  console.log('state:',state);
  /*
    state: RefImpl {_rawValue: "ahhh", _shallow: false, __v_isRef: true, _value: "ahhh"}
            __v_isRef: true
            _rawValue: "jim"
            _shallow: false
            _value: "jim"
            value: "jim"
            __proto__: Object
  */
  effect(()=>{
    app.innerHTML = state.value
  })
  setTimeout(()=>{
    state.value = 'jim';
  },1000)


  /** case2 */
  /*const state = ref({name:'ahhh'});
  console.log('state:',name);
  /!*
    state: RefImpl {_rawValue: {…}, _shallow: false, __v_isRef: true, _value: Proxy}
            __v_isRef: true
            _rawValue: {name: "ahhh"}
            _shallow: false
            _value: Proxy
                [[Handler]]: Object
                [[Target]]: Object
                [[IsRevoked]]: false
            value: Proxy
            __proto__: Object
  *!/
  effect(()=>{
    app.innerHTML = state.value.name
  })
  setTimeout(()=>{
    state.value.name = 'jim';
  },1000)*/

</script>
</body>
</html>
